import { defineComponent, ref } from 'vue'
import './index.scss'

export default defineComponent({
  name: 'AutoHeightDialog',

  props: {
    topBg: {
      type: String,
      required: true
    },
    bottomBg: {
      type: String,
      required: true
    },
    middleBg: {
      type: String,
      required: true
    }
  },

  setup(props, { slots }) {
    const {topBg, bottomBg, middleBg} = props;
    
    let wrapStyle = ref('')
    let middleStyle = ref('');
    wrapStyle.value = `background-image: url(${topBg}), url(${bottomBg})`
    middleStyle.value = `background-image: url(${middleBg})`

    return () => (
      <div class="auto-height-dialog__wrap" style={wrapStyle.value}>
        <div class="auto-height-dialog__header" style="headerStyle">
          { 
            slots.header && slots.header() 
          }
        </div>
        <div class="formClose"></div>
        <div class="auto-height-dialog__line-bg" style={middleStyle.value}></div>
          { 
            slots.default && slots.default() 
          }
      </div>
    )
  }
})
